<template>
  <div>
   <el-dialog :title="showTitle" :showDialog.sync="showDialog" :visible="showDialog" @close="btnCancel">
     <el-form ref="depts" label-width="110px" :model="formData" :rules="rules">
       <el-form-item label="部门名称" prop="name">
         <el-input maxlength="30" show-word-limit style="width: 80%;" placeholder="1-50个字符" v-model="formData.name"></el-input>
       </el-form-item >
       <el-form-item label="部门编码" prop="code">
          <el-input maxlength="30" show-word-limit style="width: 80%;" placeholder="1-50个字符" v-model="formData.code"></el-input>
       </el-form-item>
       <el-form-item label="部门负责人" prop="manager">
         <el-select @focus="handleOption" style="width: 80%;" placeholder="请选择" v-model="formData.manager">
           <el-option  v-for="item in peoples" :key="item.id" :label="item.username" :value="item.username"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="部门介绍" prop="introduce">
          <el-input maxlength="300" show-word-limit style="width: 80%;" placeholder="1-300个字符" type="textarea" :rows="3" v-model="formData.introduce"></el-input>
       </el-form-item>
     </el-form>
     <el-row type="flex" justify="center" slot="footer">
       <el-col :span="6">
         <el-button size="small" @click="btnCancel">取消</el-button>
         <el-button size="small" type="primary" @click="isOk">确定</el-button>
       </el-col>
     </el-row>
   </el-dialog>
  </div>
</template>

<script>
import { getDepartments, addDepartments, getDepartDetail, updateDepartments  } from '@/api/departments'
import { getEmployeeSimple } from '@/api/employee'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: true,
    },
    treeNode: {
       type: Object,
       default: null
    }
  },
  data () {
    const checkNameRepeat = async(rule, value,callback) => {
    const { depts } = await getDepartments()
    let isRepeat = false
    if(this.formData.id) {
      isRepeat = depts.filter(item => item.pid === this.treeNode.pid && item.id !== this.treeNode.id).some(item => item.name === value)
    } else {
      isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
    }
    isRepeat ? callback(new Error(`同级部门下已经存在这个${value}部门了`)) : callback()
    }
    const checkCodeRepeat = async(rule, value,callback) => {
    const { depts } = await getDepartments()
    let isRepeat = false
    if(this.formData.id) {
     isRepeat = depts.filter(item => item.id !== this.treeNode.id).some(item => item.code === value && value)
    } else {
      isRepeat = depts.some(item => item.code === value && value)
    }
    isRepeat ? callback(new Error(`组织架构下已经存在这个${value}编码了`)) : callback()
    }
    return {
     formData: {
       name: '',
       code: '',
       manager: '',
       introduce: ''
     },
     rules: {
       name: [
         {required: true, message: '部门名称为必填项', trigger: 'blur'},
       {min: 1,max: 50, message: '字数在1-50之间', trigger: 'blur'},
       {trigger: 'blur', validator: checkNameRepeat}
       ],
       code: [{
         required: true, message: '部门编码为必填项', trigger: 'blur'
       },{
         trigger: 'blur', validator: checkCodeRepeat
       }],
       manager: [{
         required: true, message: '部门负责人为必填项', trigger: 'blur'
       },
       {min: 1,max: 50, message: '字数在1-50之间', trigger: 'blur'}],
       introduce: [{
         required: true, message: '部门介绍为必填项', trigger: 'blur'
       },
       {min: 1,max: 300, message: '字数在1-300之间', trigger: 'blur'}]
     },
     peoples: []
    }
  },
  created () {
    
  },
  mounted () {

  },
  computed: {
    showTitle () {
      return this.formData.id ? '编辑部门' : '添加子部门'
    }
  },
  methods: {
  async handleOption() {
    this.peoples = await getEmployeeSimple()
   },
  //  获取详情方法
  async getDepartDetail (id) {
     this.formData = await getDepartDetail(id)  
  },
   isOk () {
     this.$refs.depts.validate(async isOk => {
       if(isOk) {
         if(this.formData.id) {
           await updateDepartments(this.formData)
         } else {
           await addDepartments({...this.formData, pid: this.treeNode.id})
         }
       this.$emit('addDepts')
       this.$emit('update:showDialog',false)
       }
     })
   },
   btnCancel() {
     this.formData = {
       name: '',
       code: '',
       manager: '',
       introduce: ''
     }
     this.$refs.depts.resetFields()
     this.showDialog = false
   }
  }
}
</script>

<style scoped lang="less">

</style>
